import ProCard from '@ant-design/pro-card';
import { Card, Drawer, Skeleton } from 'antd';
import { useEffect, useState } from 'react';
import style from './index.less';
import { DrawerForm } from '@ant-design/pro-form';
import { preview } from '@/services/api/api-user-analysis';
import Meta from 'antd/lib/card/Meta';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
interface PreviewModuleProps { }
const PreviewModule: React.FC<PreviewModuleProps> = ({ }) => {
  const [drawerFormOpen, setDrawerFormOpenState] = useState(false);
  const [drawerDataList, setDrawerDataListState] = useState([]);
  const categoryItem = [
    {
      name: "机关部门",
      class: style.机关部门,
    },
    {
      name: "中小学",
      class: style.中小学
    },
    {
      name: "驻区单位",
      class: style.驻区单位
    },
    {
      name: "镇街",
      class: style.镇街
    },
    {
      name: "国有企业",
      class: style.国有企业
    },
    {
      name: "科研平台",
      class: style.科研平台
    },
    {
      name: "高校",
      class: style.高校
    },
    {
      name: "企业",
      class: style.企业
    },
    {
      name: "幼儿园",
      class: style.幼儿园
    },
  ]
  /**
   * 本月选题计划(单位数据)
   */
  const [data, setDataState] = useState<UserAnalysisData.Preview[]>([]);

  /**
   * 本月选题计划
   */
  const loadData = async () => {
    try {
      const response = await preview();
      if (response.code === 0) {
        setDataState(response.data);
      }
    } catch (error) { }
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <>
      <Drawer
        title={drawerDataList?.title}
        open={drawerFormOpen}
        width={400}
        onClose={() => setDrawerFormOpenState(false)}
      >
        {drawerDataList.list &&
          drawerDataList?.list.map((child) => {
            return categoryItem?.map((item: any) => {
              if (item.name === child.title) {
                return (
                  <>
                    <ProCard
                      bodyStyle={{
                        paddingLeft: '0px',
                        paddingRight: '0px',
                        height: 100,
                      }}
                      layout="center"
                      direction="column"
                      className={item.class}
                      style={{ marginLeft: 10 }}
                    >
                      <h4>{child.title}</h4>
                      <h3 style={{ color: '#5FA2F0', marginTop: 0 }}>{child.count}</h3>
                    </ProCard>
                  </>
                );
              }
            });
          })}
      </Drawer>

      <ProCard >
        系统用户
        {/* <Flex
          justify={'space-between'}
          align={'center'}
          style={{
            marginTop: 20,
          }}
        > */}
        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: 'center' }}>
          {data.length <= 0 ? <Skeleton active > </Skeleton> : <></>}
          {data?.map((item, index) => {
            return (
              <div key={index}>

                <ProCard
                  style={{
                    marginTop: 10,
                  }}
                  bodyStyle={{
                    width: '40vw',
                    marginRight: 10
                  }}
                  className={index === 0 ? style.totalUser1 : style.totalUser2}
                  onClick={() => {
                    setDrawerFormOpenState(true);
                    setDrawerDataListState(item);
                  }}
                >
                  <Meta
                    style={{ textAlign: 'center' }}
                    title={<>
                      <div style={{ display: 'flex', justifyContent: 'center' }}>
                        <div>
                          {index === 0 ? (
                            <HomeOutlined
                              style={{
                                color: 'white',
                                fontSize: 25,
                              }}
                            />
                          ) : (
                            <UserOutlined
                              style={{
                                color: 'white',
                                fontSize: 25,
                              }}
                            />
                          )}
                        </div>
                        <h2 style={{ color: 'white', marginLeft: 10, fontSize: 18 }}>全部{item.item.title}</h2>
                      </div>
                    </>}
                    description={<h1 style={{ color: 'white' }}>{item.item.count}</h1>}
                  />
                </ProCard>
              </div>
            );
          })}
          {/* </Flex> */}
        </div>
      </ProCard>
    </>
  );
};

export default PreviewModule;
